<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学院专业多选下拉列表</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 600px; margin: 0 auto; }
        select { width: 100%; padding: 8px; margin: 10px 0; }
        .selected-values { margin-top: 20px; padding: 10px; border: 1px solid #ddd; }
        .tag { display: inline-block; background: #e9f5ff; color: #165DFF; padding: 4px 8px; margin: 4px; border-radius: 4px; }
        .remove-tag { margin-left: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h2>选择专业</h2>
        
        <select id="majorSelect" multiple size="5">
            <!-- 选项将由JavaScript动态生成 -->
        </select>
        
        <div id="selectedValues" class="selected-values">
            <h3>已选择的专业</h3>
            <div id="valueContainer">
                <span class="text-gray-500">未选择任何专业</span>
            </div>
        </div>
    </div>

    <script>
        const majorSelect = document.getElementById('majorSelect');
        const valueContainer = document.getElementById('valueContainer');

        // 从college.json加载数据
        fetch('college2.json')
            .then(response => response.json())
            .then(data => {
                // 提取所有专业（假设JSON结构包含学院和专业）
                const allMajors = [];
                data.forEach(college => {
                    college.majors.forEach(major => {
                        allMajors.push({
                            id: major.id || `${college.id}_${major.name}`, // 确保唯一性
                            name: major.name,
                            college: college.name
                        });
                    });
                });

                // 填充下拉列表
                allMajors.forEach(major => {
                    const option = document.createElement('option');
                    option.value = major.id;
                    option.textContent = `${major.name} (${major.college})`;
                    majorSelect.appendChild(option);
                });

                // 监听选择变化
                majorSelect.addEventListener('change', updateSelectedValues);
                updateSelectedValues(); // 初始化显示
            })
            .catch(error => {
                console.error('加载JSON数据失败:', error);
                valueContainer.innerHTML = '<span class="text-red-500">加载数据失败，请检查控制台错误信息</span>';
            });

        // 更新选中值的显示
        function updateSelectedValues() {
            const selectedOptions = Array.from(majorSelect.selectedOptions);
            valueContainer.innerHTML = '';

            if (selectedOptions.length === 0) {
                valueContainer.innerHTML = '<span class="text-gray-500">未选择任何专业</span>';
                return;
            }

            selectedOptions.forEach(option => {
                const majorId = option.value;
                const majorName = option.textContent;

                const tag = document.createElement('div');
                tag.className = 'tag';
                tag.innerHTML = `${majorName} <span class="remove-tag" onclick="removeSelection('${majorId}')"><i class="fa fa-times"></i></span>`;
                valueContainer.appendChild(tag);
            });
        }

        // 移除选中项
        function removeSelection(majorId) {
            Array.from(majorSelect.options).forEach(option => {
                if (option.value === majorId) {
                    option.selected = false;
                }
            });
            updateSelectedValues();
        }
    </script>
</body>
</h